<template>
    <div id="manage">
        <div class="manage_top">
            <div class="form">
                <div style="margin: 15px 20px 0 20px">
                    <zy-select v-if="formConfig" :fromValue="queryForm" :formConfig="formConfig" @search="search" @resetForm="resetForm" :actions="actions"></zy-select>
                </div>
                <div style="height: 40px; display: flex; margin: 10px 20px 0 20px">
                    <div class="table_title">{{ table_title }}管理</div>
                    <div class="btns">
                        <el-button v-for="item in actions" :key="item.label" :icon="item.icon" @click="item.click()">{{ item.label }}</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="manage_bottom">
            <div class="table">
                <div class="table_mask"></div>
                <zy-table :loading="loading" :tableData="tableData" :tableColumn="tableColumn" :pageSize="pagination.pageSize" :total="pagination.total" @changePage="changePage" @changeID="changeID"></zy-table>
            </div>
        </div>
        <dialogVue ref="dialogVue" @search="search" />
    </div>
</template>
<script>
import { mapState } from 'vuex'
import SearchManage from '@/components/basic/SearchManage.vue'
import dialogVue from './dialog.vue'

import { formConfig, column } from './formConfig.js'
import { requestApi } from '@/requset/api'
export default {
    extends: SearchManage,
    data() {
        return {
            table_title: '算法配置',
            isShow: true,
            troubleList: [],
            url: 'algorithm',
            formConfig: null,
            tableColumn: null,
            tableData: [],
            queryForm: {
                scope_id: null,
                scope_id_list: [],
                name: '',
                page: 1,
                size: 20,
            },
            queryFormC: {
                scope_id: null,
                scope_id_list: [],
                status: null,
                device_name: '',
                start_time: '',
                end_time: '',
                page: 1,
                size: 20,
            },
            actions: [
                {
                    label: '添加',
                    icon: 'el-icon-plus',
                    click: () => {
                        this.$refs.dialogVue.doOpen()
                    },
                    if: () => this.operate,
                },
            ],
        }
    },
    components: {
        dialogVue,
    },
    methods: {
        setQueryForm(queryForm, query) {
            let { warn_level, device_name, zone_id, factory_id, company_id, group_id } = query
            if (warn_level) this.queryForm.warn_level = warn_level
            if (device_name) this.queryForm.device_name = device_name
            let setList = (userLevel, list) => {
                if (userLevel === 'zone') {
                    return list.slice(3, 4)
                } else if (userLevel === 'factory') {
                    return list.slice(2, 4)
                } else if (userLevel === 'company') {
                    return list.slice(1, 4)
                } else {
                    return list
                }
            }
            if (zone_id) {
                this.$nextTick(() => {
                    queryForm.scope_id_list = setList(sessionStorage.getItem('userLevel'), [Number(group_id), Number(company_id), Number(factory_id), Number(zone_id)])
                    this.searchBtn()
                })
            } else this.searchBtn()
        },
        edit(val) {
            this.$refs.dialogVue.doOpen(val, 'edit')
        },
        handleContextMenu(row) {},
        view(val) {
            this.$refs.dialogVue.doOpen(val, 'view')
        },
        handleCheck(val) {
            let { id, status } = val
            status = status == 1 ? 0 : 1
            requestApi('post', '/algorithm/edit', { id, status }).then((res) => {
                if (res.data.code == 0) {
                    this.$message.success('设置成功')
                    this.searchBtn()
                }
            })
        },
        getTrouble() {
            return requestApi('post', 'trouble/getlist', { page: 1, size: 9999 }).then((res) => {
                if (res.data.code == 0) {
                    this.troubleList = formatData(res.data.data)
                }
            })
        },
    },
    computed: {
        ...mapState('backstage', ['backstageData', 'sensorType']),
        tags() {
            return [{ title: '总数', num: this.pagination.total }]
        },
    },
    created() {
        this.setQueryForm(this.queryForm, this.$route.query)
        formConfig[0].options = this.backstageData
        this.formConfig = formConfig
        column[column.length - 1].buttons = [
            {
                text: '查看',
                click: (val) => this.view(val),
                icon: 'el-icon-s-comment',
            },
            {
                text: '停止',
                click: (val) => this.handleCheck(val),
                if: (val) => val.status === 1 && this.operate,
                icon: 'el-icon-switch-button',
            },
            {
                text: '启动',
                click: (val) => this.handleCheck(val),
                if: (val) => val.status === 0 && this.operate,
                icon: 'el-icon-video-play',
            },
            {
                text: '编辑',
                click: (val) => this.edit(val),
                if: () => this.operate,
                icon: 'el-icon-edit-outline',
            },
            {
                text: '删除',
                click: (val) => this.delete(val),
                if: () => this.operate,
                icon: 'el-icon-delete',
            },
        ]
        this.tableColumn = column
    },
}
</script>
<style>
.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}
</style>
